<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <input type="text" oninput="ipt()">
    <button onclick="changeData()">点击</button>
    <script src="./js/vue.js"></script>
    <script>
        // new Vue({
        //     data: {
        //         msg: 'hello world'
        //     },

        //     created() {
        //         console.log(this)
        //     },
        // }).$mount

        // vue2.0的数据双向绑定是依赖于  Object.defineProperty()
        var box = document.getElementById('app')
        var obj = {
            name: '张三',
            age: 15,
            tel: 110
        }

        box.innerText = obj.name

        // for ... in Object.assign()  ... 等类型的方法都是只能操作对象的可枚举属性 
        // Object.defineProperty(obj, 'name', {
        //     value: '李四',
        //     // enumerable: false, // 定义对象的属性是否可枚举 false表示不可枚举
        //     // writable: false, // 定义对象的值是否可以更该 false表示不能修改
        //     configurable: true // 定义对象的属性是否可以删除 false 表示不能删除
        // })

        // for(let key in obj) {
        //     console.log(key)
        // }
        
        

        // obj.name = '王五'
        // delete obj.name
        // console.log(obj)
        
        var $obj = Object.assign({}, obj)
        Object.defineProperty(obj, 'name', {
            set(val) {
                // console.log(val)\
                $obj.name = val
                box.innerText = val
            },


            get() {
                return $obj.name
            }
        })

        // console.log(obj)

        function changeData() {
            obj.name = '李四'
        }

        function ipt(e) {
            let event = e || window.event
            obj.name = event.target.value
        }
        
    </script>
</body>
</html>